<template>
	<div>

		<a-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
			@ok="handleSubmit" @cancel="handleCancel">

			<a-card :bordered="false">
				<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true" :showPagination="false"
					:rowKey="(record) => record.code" :rowSelection="null">
					<span slot="materialModelNumber" slot-scope="text, record">
						{{ record.material ? record.material.materialModelNumber : '' }}
					</span>
					<!-- <span slot="image" slot-scope="text">
						<image-preview :images="text" />
					</span> -->
					<span slot="image" slot-scope="text,record">
						<image-preview1 :images="text" :imageUrl="record.imageUrl" />
					</span>
					<span slot="action" slot-scope="text, record">
						<a-space>
							<a @click="backStoreRecordModal.show(record)">退库记录</a>
						</a-space>
					</span>
				</s-table>

			</a-card>
		</a-modal>
		<back-store-record-modal ref="backStoreRecordModal" />
	</div>

</template>

<script lang="ts">
import { Component, Vue, Ref } from "vue-property-decorator";
import { STable } from '@/components'
import BackStoreRecordModal from './backStoreRecordModal.vue'
import { page } from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'

type EmsOrder = {
	orderId: string,
}


@Component({
	components: {
		STable,
		BackStoreRecordModal
	}
})
export default class BackStoreDetailCompletedModal extends Vue {
	@Ref() readonly table!: any
	@Ref() readonly backStoreRecordModal!: BackStoreRecordModal

	visible = false
	title = ''
	confirmLoading = false
	// 查询参数
	queryParam = {
		materialType: '',
		orderId: '',
		pageSize: undefined,
	}
	columns = [
		{
			align: 'center',

			title: '序号', width: '80px',
			customRender: (text, record, index) => `${index + 1}`
		},

		{
			align: 'center',

			title: '包材编号',
			dataIndex: 'materialCode'
		},

		{
			align: 'center',

			title: '包材名称',
			dataIndex: 'materialName'
		}, {
			title: '规格',
			dataIndex: 'materialModelNumber',
			scopedSlots: { customRender: 'materialModelNumber' }
		}, {
			title: '图片',
			dataIndex: 'image',
			scopedSlots: { customRender: 'image' }
		}, {
			align: 'center',
			title: '已退库数量',
			dataIndex: '',
			customRender(text: any, record: any,) {
				return `${record.returnStockNumber + record.extraReturnStockNumber}`
			}
		},
		{
			align: 'center',

			title: '操作',
			dataIndex: '',
			width: '150px',
			scopedSlots: { customRender: 'action' }
		}
	]
	materialType = this.$businessEnum.MATERIAL_TYPE_ENUM.packing.id
	selectedRowKeys = []
	selectedRows = []
	emsOrder: Partial<EmsOrder> = {}


	loadData(parameter: { pageNo: number, pageSize: number }) {
		this.queryParam.materialType = this.materialType
		this.queryParam.orderId = this.emsOrder.orderId
		this.queryParam.pageSize = -1
		const params = {
			...this.queryParam,
			...parameter,
		}
		return page(params).then((res) => {
			return res.data
		})
	}


	show(record,) {
		this.visible = true
		this.emsOrder = record
		this.title = `退库详情（${record.orderNumber}）`
		setTimeout(() => {
			this.handleOk()
		}, 100)
	}


	handleOk() {
		this.table.refresh()
	}

	handleSubmit() {
		this.visible = false
	}

	handleCancel() {
		this.visible = false
	}

	onSelectChange(selectedRowKeys, selectedRows) {
		this.selectedRowKeys = selectedRowKeys
		this.selectedRows = selectedRows
	}


}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
